<!DOCTYPE html>
<html>
  <head>
    <title>欢迎进入群空间</title>
  </head>
  <body>

    <div>
      <form id="set_openid" method="POST">
        <label>设置OPENID:</label>
        <input type="text" name="openid" />
        <button>设置</button>
      </form>
    </div>
    <hr />
    <div>
      {% if current_user.is_admin %}
      <span>当前权限: 管理员</span>
      <form id="logout">
        <button id="btn_logout">注销</button>
      </form>
      {% else %}
      <form id="login">
        <label>管理员密码: </label>
        <input type="password" name="password" />
        <button id="btn_login">登录</button>
      </form>
      {% endif %}
    </div>
    <hr />
    <div id="ann_container">
      <h3>通告数据</h3>
      <h4><i>置顶通告</i></h4>
      <div id="ann_sticky">
        <h4 class="ann_title"></h4>
        <p class="ann_content"></p>
        <span><i class="ann_time"></i></span>
      </div>
      {% if current_user.is_admin %}
      <h4><i>添加通告</i></h4>
      <form id="ann_form" method="POST" enctype="multipart/form-data">
        <div>
          <label>标题:</label>
          <input type="text" name="title" />
        </div>
        <div>
          <label>内容:</label>
          <textarea name="content"></textarea>
        </div>
        <button>发布</button>
      </form>
      {% endif %}
      <h4><i>通告列表</i></h4>
      <a id="load_ann" href="#">加载全部通告</a>
      <div id="ann_list"></div>
    </div>
    <hr />
    <div id="moment_container">
      <h3>群友圈状态</h3>
      <div>
        <form id="moment_form">
          <label>状态内容</label>
          <input name="content" type="text" />
          <button type="submit" id="moment_add">添加</button>
        </form>
      </div>
      <a id="load_moment" href="#">加载全部群友圈状态</a>
      <div id="moment_list"></div>
    </div>
    <hr />
    <div>
      <h3>通讯录数据</h3>
      <a id="load_contact" href="#">加载全部群友圈状态</a>
      <div id="contact_list"></div>
    </div>
    <hr />
    <div>
      <h3>操作状态</h3>
      <div id="status"></div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        var csrf_token = "{{ csrf_token() }}";
        $.ajaxSetup({
          beforeSend: function(xhr, settings){
            if (!/^(GET|OPTIONS|HEAD|TRACE)$/.test(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
          }
        });
        $.get(
          "{{ url_for('.announcement', sticky=1, _external=True) }}",
          function(data) {
            var ann = data.data;
            $('#ann_sticky .ann_title').html(ann.title);
            $('#ann_sticky .ann_content').html(ann.content);
            $('#ann_sticky .ann_time').html(ann.create_time);
          }
        ); // .get()

        var load_ann = function() {
          $.get(
            "{{ url_for('.announcement', _external=True) }}",
            function(data) {
              var container = $('#ann_list');
              container.empty();
              container.html(JSON.stringify(data.data));
            }
          );
        };

        $('#load_ann').click(function(){
          load_ann();
        }); // load_ann.click()

        $('#ann_form').submit(function(event){
          event.preventDefault();
          $.post(
            "{{ url_for('.announcement') }}",
            $(this).serialize(),
            function(data){
              $('#status').html(JSON.stringify(data));
            }
          );
        }); // ann_form.submit

        $('#moment_form').submit(function(event){
          event.preventDefault();
          var form_data = $(this).serialize();
          $.post(
            "{{ url_for('.moment') }}",
            form_data,
            function(data){
              $('#status').html(JSON.stringify(data));
            }
          );
        }); // add_moment submit

        $('#login').submit(function(event){
          event.preventDefault();
          $.post(
            "{{ url_for('.login') }}",
            $(this).serialize(),
            function(data){
              $('#status').html(JSON.stringify(data));
              window.location.reload();
            }
          );
        }); //login.submit

        $('#logout').submit(function(event){
          event.preventDefault();
          $.post(
            "{{ url_for('.logout_admin') }}",
            function(data){
              $('#status').html(JSON.stringify(data));
              window.location.reload();
            }
          );
        }); //logout.submit

        $('#set_openid').submit(function(event){
          event.preventDefault();
          $.post(
            "{{ url_for('.set_session') }}",
            $(this).serialize(),
            function(){
              $('#status').html(JSON.stringify(data));
            }
          );
        }); // set_openid.submit

        var load_moment = function() {
          $.get(
            "{{ url_for('.moment', _external=True) }}",
            function(data) {
              var container = $('#moment_list');
              container.empty();
              container.html(JSON.stringify(data.data));
            }
          );
        }; // load_moment

        $('#load_moment').click(function(){
          load_moment();
        }); // .click()

        var load_contact = function() {
          $.get(
            "{{ url_for('.contact') }}",
            function(data){
              var container = $('#contact_list');
              container.empty();
              container.html(JSON.stringify(data.data));
              $('#status').html(data.success);
            }
          );
        }; // load_contact

        $('#load_contact').click(function(){
          load_contact();
        }); // load_contact.click()
      }); // $.ready
    </script>
  </body>
</html>
